<template>
    <j-modal
            :title="title"
            :width="width"
            :visible="visible"
            switchFullscreen
            @ok="handleOk"
            :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
            @cancel="handleCancel"
            cancelText="关闭">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :expanded-row-keys.sync="expandedRowKeys"
                :pagination="false"
            >
<!--                <span slot="action" slot-scope="text, record">-->
<!--                  <a @click="handleEdit(record)">编辑</a>-->
<!--                </span>-->
            </a-table>
    </j-modal>
</template>

<script>
    import * as customer from '../../../../api/customer'

    const columns = [
        {
            title: '部门名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '部门编号',
            dataIndex: 'value',
            key: 'value',
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            scopedSlots: { customRender: 'action' }
        },
    ];

    export default {
        data() {
            return {
                title: '机构部门信息管理',
                width: '80%',
                visible: false,
                disableSubmit: false,

                dataSource : [],
                columns,
                expandedRowKeys: [],
            }
        },
        methods: {
            async show(cus) {
                this.visible = true;
                if(cus && cus.customerNumber){
                    let params = {
                        customerNumber : cus.customerNumber
                    };
                    let data = await customer.getCustomerDepartmentByNumber(params);
                    this.expandedRowKeys = [];
                    this.dataSource = this.forEachDepartData(data);
                }
            },
            // 自定义处理数据源
            forEachDepartData: function(data = [],key) {
                let arr = [];
                data.forEach((item, index) => {
                    if(key !== undefined){
                        item['key'] = `${key}-${index}`;
                    }else{
                        item['key'] = `${index}`;
                    }
                    if (item.children && item.children.length) {
                        this.expandedRowKeys.push(item['key']);
                        item.children = this.forEachDepartData(item.children,index);
                    }else{
                        delete item['children'];
                    }
                    arr.push(item);
                })
                return arr;
            },
            close() {
                this.$emit('close')
                this.visible = false
            },
            handleOk() {
                this.close()
            },
            handleCancel() {
                this.close()
            },
            handleEdit(){

            },
        }
    }
</script>
